<html>

<head>
    <meta charset="utf-8" />
    <title>AJAXJS Web UI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../dist/css/base.css" />
    <link rel="stylesheet" type="text/css" href="../common/demo.css" />
    <link rel="stylesheet" type="text/css" href="../../dist/css/form/control.css" />
    <link rel="stylesheet" type="text/css" href="../../dist/css/form/upload.css" />

    <link crossorigin="anonymous" integrity="sha384-FckWOBo7yuyMS7In0aXZ0aoVvnInlnFMwCv77x9sZpFgOonQgnBj1uLwenWVtsEj"
        href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.js"></script>
</head>

<body>
    <div class="box">
        <h1>Welcome to AJAXJS Web UI</h1>
        <div>
            <menu>
                <span></span>
            </menu>
            <div class="content">
                <h2>文件上传 File Upload</h2>
                <p>通过 label 标签 for 属性关联具体的 input[type=file] 触发本地 file picker。input[type=file] 本身隐藏。</p>
                <pre class="prettyprint"><xmp></xmp></pre>
                <p>File upload Demo:</p>  
                <div class="fileUpload">
                    <aj-xhr-upload></aj-xhr-upload>
                </div>   
                <p>Image upload Demo:</p>  
                <div class="imgUpload">
                    <aj-xhr-upload></aj-xhr-upload>
                </div>    
            </div>
            <div class="copyright">
                <div></div>
            </div>
        </div>
    </div>
    <script src="../common/demo.js"></script>
    <script src="../../dist/base/prototype.js"></script>
    <script src="../../dist/base/aj.js"></script>
    <script src="../../dist/form/xhr-upload.js"></script>
    <script>
        new Vue({el: '.fileUpload'});
        new Vue({el: '.imgUpload'});
    </script>
</body>

</html>